<template>
  <div>
    <el-row>
      <el-col :span="3" :offset="14" style="font-size: 18px;text-align: center;">
       <span>昵称/真名</span>
      </el-col>
      <el-col :span="4">
        <el-input v-model="condition" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" style="margin-left: 10px;">
        <el-button type="primary" icon="el-icon-search" @click="findUserByCondition">搜索</el-button>
      </el-col>
    </el-row>
    <el-table
        :data="page.records"
        style="width: 80%">
        <el-table-column
          prop="userName"
          label="用户名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="userPhone"
          label="手机号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="realName"
          label="真名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="isReal"
          label="是否实名"
          width="120">
          <template slot-scope="scope">
            {{scope.row.isReal==0?"否":"是"}}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="账号状态"
          width="80">
          <template slot-scope="scope">
            {{scope.row.state==0?"正常":"禁用"}}
          </template>
        </el-table-column>
        <el-table-column label="修改状态">
        <template v-slot="scope">
         <el-button type="success" v-if="scope.row.state==1" size="small" round @click="updateUserStateStart(scope.row.userId)">启用</el-button>
          <el-button type="danger" v-if="scope.row.state==0" size="small" round @click="updateUserStateDown(scope.row.userId)">禁用</el-button>
         </template>
        </el-table-column>
      </el-table>
      <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
  </div>
</template>

<script>
  export default{
    name:"UserAccount",
    data(){
      return{
        page:{},
        pageNum:1,
        pageSize:10,
        condition:""
      }
    },
    methods:{
      handleSizeChange(val){
        this.pageSize=val
        this.loadAllUserInfo()
      },
      handleCurrentChange(val){
        this.pageNum=val
        this.loadAllUserInfo()
      },
      loadAllUserInfo(){
      this.$http.get("/user/userInfo/loadAllUserInfo",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize
        }
      }).then(resp=>{
        this.page=resp.data.data
      })
      },
      updateUserStateStart(uesrId){
        this.$http.get("/user/userAccount/updateUserState",{
          params:{
            userId:userId,
            state:0
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: '启用成功',
                      type: 'success'
                    });
          }else{
             this.$message.error(resp.data.message);
          }
          this.loadAllUserInfo()
        })
      },
      updateUserStateDown(userId){
      this.$http.get("/user/userAccount/updateUserState",{
        params:{
          userId:userId,
          state:1
        }
      }).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '禁用成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
        this.loadAllUserInfo()
      })
      },
      findUserByCondition(){
        this.$http.get("/user/userInfo/loadAllUserInfo",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize,
            condition:this.condition
          }
        }).then(resp=>{
          this.page=resp.data.data
        })
      }
    },
    created(){
      this.loadAllUserInfo()
    }
  }
</script>

<style>
</style>
